import string from './css.js'

const code = document.querySelector('#code')
const show = document.querySelector('#show')

console.log('code is')
console.log(code)
console.log('show is')
console.log(show)
const player = {
    id: undefined,
    time: 100,
    n: 1,

    init: () => {
        code.innerText = string.substr(0, player.n)
        show.innerHTML = string.substr(0, player.n)
        player.play()
        player.bindEvents()
    },
    bindEvents: () => {
        document.querySelector('#btnPause').onclick = player.pause
        document.querySelector('#btnPlay').onclick = player.play
        document.querySelector('#btnFast').onclick = player.fast
        document.querySelector('#btnSlow').onclick = player.slow
        document.querySelector('#btnNormal').onclick = player.normal
    },
    run: () => {
        player.n += 1
        if (player.n > string.length) {
            window.clearInterval(player.id)
            return
        }
        code.innerText = string.substr(0, player.n)
        show.innerHTML = string.substr(0, player.n)
        code.scrollTop = code.scrollHeight
    },
    play: () => {
        window.clearInterval(player.id)
        player.id = setInterval(player.run, player.time);
    },
    pause: () => {
        window.clearInterval(player.id)
    },

    fast: () => {
        player.pause()
        player.time = 0
        player.play()
    },
    slow: () => {
        player.pause()
        player.time = 300
        player.play()
    },
    normal: () => {
        player.pause()
        player.time = 100
        player.play()
    },
}

player.init()
